// Copyright 2011 Google Inc. All Rights Reserved.
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
//     http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.

/**
 * Locator updater soy file.
 *
 * @author phu@google.com (Po Hu)
 */

{namespace element.helper.Templates.locatorsUpdater}


/**
 * Shows the locators updater UI.
 */
{template .showUI}
  <table width="98%">
    <tr>
      <td>
        <table width="100%">
          <tr>
            <td align="left" style="font-size:14px">
              Please copy and paste your xml here:
            </td>
            <td align="right">
              <button id="generateTree">Generate</button>
            </td>
          </tr>
        </table>
      </td>
    </tr>
    <tr>
      <td>
        <textarea id="xmlData" style="width:100%; height:150px">
        </textarea>
      </td>
    </tr>
    <tr>
      <td>
        <div id="xmlTree"></div>
        <button id="saveToXml" style="display:none">Save</button>
      </td>
    </tr>
  </table>
{/template}


/**
 * Shows the node UI.
 * @param data
 */
{template .getNode}
  <input type="text" id="{$data.nameId}" style="width:80px"
         value="{$data.name}">
  {if $data.value}
    {sp}
    <input type="text" id="{$data.valueId}" style="width:250px"
           value="{$data.value}">
    {sp}
    <img id="{$data.nodeId}" src=""
         style="width:16px;height:16px;vertical-align:middle">
    {sp}
    <input type="button" name="updateBtn"
           id="{$data.updateBtnId}" value="update">
  {else}
    <input type="button" name="showBtn"
           style="padding: 1px" id="{$data.showBtnId}" value="show">
  {/if}
{/template}


/**
 * Shows the helper dialog content.
 */
{template .showHelperContent}
  <table width="98%">
    <tr>
      <td width="15px"></td>
      <td width="70%"><input type="text" id="cssSelectorInput"
                             style="width:100%"></td>
      <td align="right" colspan="2">
        <input type="button" id="pingSelector" value="ping">
        <input type="button" id="saveSelector" value="save">
      </td>
    </tr>
  </table>
  <hr width="98%">
  <table width="98%">
    <tr>
      <td colspan="4" style="padding-left:15px">
        <b>Attributes used for the ancestors.</b>
      </td>
    </tr>
    <tr>
      <td width="15px"></td>
      <td width="30px"><input type="checkbox" checked
                 name="ancestorLocatorCheck" value="id"></td>
      <td>id</td>
      <td></td>
    </tr>
  </table>
  <hr width="98%">
  <table id="locatorMethodsTable" width="98%" style="margin-top:10px">
  </table>
{/template}


/**
 * Shows the helper methods content.
 * @param data
 */
{template .showMethodsContent}
  <tr>
    <td colspan="4" style="padding-left:15px" align="center">
      <b>Attributes used for the element</b>
    </td>
    <td>
      <b>Contains</b>
    </td>
  </tr>
  {foreach $method in $data}
    <tr>
      <td width="15px"></td>
      <td><input type="checkbox" name="elementLocatorCheck"
                 value="{$method['name']}"></td>
      <td>{$method['name']}</td>
      <td><input type="text"
                 id="value-elementLocatorCheck-{$method['name']}"
                 style="width: 98%" value="{$method['value']}"></td>
      <td><input type="checkbox" name="elementContain"
                 id="contains-elementLocatorCheck-{$method['name']}"
                 value="{$method['name']}"></td>
    </tr>
  {/foreach}
{/template}


/**
 * Shows the elements with the same xpath in project.
 * @param data
 * @param loadFrom
 */
{template .showElementsWithSameXpath}
<div style="border-style: solid; border-width: 1px; margin: 3px;
            padding-top: 10px; padding-bottom: 10px;
            background-color: #FFFFAA;">
<span>
  We also found these steps with the same old xpath in this{sp}
  <b>
  {if $loadFrom == 'web'}
    test
  {else}
    project
  {/if}
  </b>
  {sp}
  do you also want to replace them?
</span>
<table style="font-size: 12px; margin-top: 10px; margin-bottom: 10px;">
  <tr>
    <th width="40%" align="left">test</th>
    <th width="50%" align="left">step</th>
    <th align="left">replace</th>
  </tr>
  {foreach $step in $data}
  <tr>
    <td>{$step['testName']}</td>
    <td>{$step['stepName']}</td>
    <td><input type="checkbox" name="selectedSteps" checked
               value="{$step['testName']}___{$step['stepName']}"></td>
  </tr>
  {/foreach}
</table>
<input type="button" style="border-color: red; border-style: solid;"
       id="replaceAllXpaths" value="Replace">
<input type="button" style="border-color: blue; border-style: solid;"
       id="cancelReplaceXpaths" value="Cancel">
</div>
{/template}

